<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>课后共管在线课堂</title>
  <script src="libs/thirdpart/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-tabs__content {
      /* padding: 0 !important;
      width: 100%;
      height: 100%;
      overflow: hidden; */
    }

    #app {
      display: flex;
      width: 100%;
      height: 100%;
    }

    .board-box {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .board-box .el-tabs__header {
      border-bottom: 0 !important;
    }

    .board-box .el-tabs__content {
      flex: 1;
      padding: 0;
    }
    .el-tabs--border-card{
      background: #101112;
      border: 0 !important;
    }
    #sketchpad{
      width: 80%;
    }
    .teacher-camera{
      background: #000;
      width: 20%;
      height: 50%;
      position: absolute;
      right: 0;
      z-index: 99;
    }
    #emptyBlock{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 99;
    }
    #operate{
      width: 2em;
      height: 2em;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 100;
    }
    .isBig{
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="teacher-camera" :class="{'isBig': isBig}">
      <div id="emptyBlock"></div>
      <img id="operate" src="./screen.svg" @click="toggleTeacherCameraSize">
    </div>
    <el-tabs class="board-box" type="border-card" style="display: none;flex:1;" v-show="isShow">
      <el-main id="sketchpad" style="padding: 0; z-index:5; height: 100%;"></el-main>
    </el-tabs>
  </div>


  <link href="https://resources-tiw.qcloudtrtc.com/thirdpart/videojs/video-js.min.css" rel="stylesheet">
  <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/videojs/video.min.js"></script>

  <!-- AXIOS SDK 白板SDK依赖axios（后续版本会去掉该依赖） -->
  <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/axios/axios.min.js"></script>

  <script src="./libs/trtc.js"></script>

  <!-- WebIM SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/webim/webim.min.js"></script>
  <!-- COS SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/cos/5.1.0/cos.min.js"></script>
  <!-- 白板SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/board/2.4.4/TEduBoard.min.js"></script>

  <!-- TIC SDK 可根据开源代码自行编译TIC-->
  <script src="https://resources-tiw.qcloudtrtc.com/tic/2.4.3/TIC.min.js"></script>

  <script src="libs/thirdpart/purl.js"></script>
  <script src="libs/thirdpart/vconsole.min.js"></script>
  <script src="js/miniprogram.js"></script>
</body>

</html>